<template>
  <div class="index">
      <Header style="background-color: #2d8cf0">
        <Row style="color:white;">
          <Col span="4" style="color: white"><Icon type="md-archive" />小幸运任务发布系统</Col>
          <Col span="13"></Col>
          <Col span="1"><div @click="show=true"><Avatar style="background-color: #87d068" icon="ios-person"/></div></Col>
          <Col span="2"><h3 style="float: left">{{username}}</h3></Col>
          <Col span="2"><Button type="primary" @click="getOut">登出</Button></Col>
          <Col span="2"></Col>
        </Row>
      </Header>
    <Row>
      <Col span="3">
        <Menu active-name="2-1" :open-names="['1','2','3','5']" style="min-height: 800px;max-height: 805px;overflow: auto;">
          <Submenu name="1" v-if="isUser">
            <template slot="title">
              <Icon type="ios-people" />
              系统首页
            </template>
            <MenuItem name="2-1" to="/">欢迎访问</MenuItem>
            <MenuItem name="2-2" to="/notice" >公告活动</MenuItem>
          </Submenu>
          <Submenu name="2" v-if="isUser">
            <template slot="title">
              <Icon type="ios-paper" />
              个人中心
            </template>
            <MenuItem name="1-1" to="/myJob">我的发布</MenuItem>
            <MenuItem name="1-2" to="/addJob">发布任务</MenuItem>
            <MenuItem name="1-3" to="/myOrder">我的订单</MenuItem>
            <MenuItem name="1-5" to="/myBill">我的账单</MenuItem>
            <MenuItem name="1-4" to="/myNews"><Badge :count="3">我的消息</Badge></MenuItem>
          </Submenu>

          <Submenu name="3" v-if="isUser">
            <template slot="title">
              <Icon type="ios-stats" />
              关于我们
            </template>
            <MenuGroup title="使用">
              <MenuItem name="3-1" to="/changePassword">修改密码</MenuItem>
              <MenuItem name="3-2" to="/vip">购买vip</MenuItem>
              <MenuItem name="3-3" to="/question">常见问题</MenuItem>
            </MenuGroup>
          </Submenu>

          <Submenu name="4" v-if="isAdmin">
            <template slot="title">
              <Icon type="md-cube" />
              管理员选项
            </template>
              <MenuItem name="4-1" to="/jobExamine">任务审核</MenuItem>
              <MenuItem name="4-2" to="/jobDistribution">任务分配</MenuItem>
              <MenuItem name="4-3" to="/userManagement">用户管理</MenuItem>
              <MenuItem name="4-4" to="/bQuestionManagement">公告问题管理</MenuItem>
          </Submenu>

          <Submenu name="5" v-if="!isUser" style="height: 650px">
            <template slot="title">
              <Icon type="ios-stats" />
              工作人员
            </template>
              <MenuItem name="5-1" to="/jobHome">任务大厅</MenuItem>
              <MenuItem name="5-2" to="/myGetJob">我的任务</MenuItem>
              <MenuItem name="5-3" to="/myNews"><Badge :count="3">我的消息</Badge></MenuItem>
<!--              <MenuItem name="5-4" to="/myWages">我的工资</MenuItem>-->
          </Submenu>
        </Menu>
      </Col>
      <Col span="21">
        <router-view></router-view>
      </Col>
    </Row>
    <Modal
      v-model="show"
      title="我的信息"
      @on-ok="ok"
    >
      <myData :look="1"  v-on:onChange="onChange"></myData>
    </Modal>
    <Footer style="position: absolute;bottom: 0px;width: 100%;z-index: 9999">2020-2021 &copy;xiaoxiangyu 版权所有 作者肖祥钰</Footer>
  </div>
</template>

<script>
  import myData from "./myData";
  import axios from "axios";

  export default {
    name: "index",
    components: {
      myData
    },
    data() {
      return{
        show:false,
        isAdmin:false,//是否为管理员
        isUser:true,//是否为用户 工作人员
        username:'',
        userForm:{
          vipTime:null,
          id:''
        }
      }
    },
    methods:{
      onChange(v){
        this.userForm=v
        this.userForm.id = this.$getCookie("userId")
      },
      getOut(){
        this.$router.push({path: '/login'});
        this.$clearCookie("userId")
      },
      ok(){
        this.userForm.vipTime = null
        axios.get('http://localhost:8888/changePwd', {params: this.userForm}).then(res => {
          if (res){
            this.$Message.success("修改成功")
            this.$setCookie("userInt",this.userForm.userInt)
            this.$setCookie("userName",this.userForm.userName)
          }else{
            this.$Message.error("修改失败")
          }
        })
      }
    },
    mounted() {
      if (this.$getCookie("uNick")){
        this.username = this.$getCookie("uNick")
      }else{
        this.username = '未命名'
      }
      if (this.$getCookie("admin")=="1"){
        this.isAdmin = true
      }else if(this.$getCookie("admin")=='2'){

      }else{
        this.isUser = false
      }
    }
  }
</script>

<style scoped>
  .index {

  }

  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #535353;
  }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #ededed;
  }
</style>
